<template>
  <page-view class="home-page">
    <div class="content-box">
      <transition :name="slideDir">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <ul class="tab-bar">
      <router-link :to="{name:'ChooseFood'}" tag="li" active-class="router-active-class">
        <span class="iconfont icondiancan"></span>
        点餐
      </router-link>
      <router-link :to="{name:'Order'}" tag="li" active-class="router-active-class">
        <span class="iconfont icondingdan"></span>
        订单
      </router-link>
      <router-link :to="{name:'Classify'}" tag="li" active-class="router-active-class">
        <span class="iconfont iconfenleipailie"></span>
        分类
      </router-link>
      <router-link :to="{name:'MySelf'}" tag="li" active-class="router-active-class">
        <span class="iconfont iconxiazai"></span>
        我的
      </router-link>
      <!-- <router-link :to="{name:'MySelf'}" v-slot="{navigate,isActive}" custom>
        <li @click="navigate" @keypress.enter="navigate" :class="{'router-active-class':isActive}">
          <span class="iconfont iconxiazai"></span>
          我的
        </li>这是高级版本的写法
      </router-link> -->
    </ul>
  </page-view>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        slideDir: "slide-left"
      }
    },
    watch: {
      $route(to, from) {
        if (from.meta.index < to.meta.index) {
          this.slideDir = "slide-left";
        } else {
          this.slideDir = "slide-right"
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home-page {
    @include flexbox(column);

    .content-box {
      flex: 1;
      overflow: auto;
    }

    .tab-bar {
      width: 100%;
      height: 55px;
      @include flexbox(row, space-around, center);
      border-top: 1px solid $primaryColor;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      z-index: 10;

      >li {
        @include flexbox(column, center, center);
        width: 55px;
        height: 55px;
        font-size: 14px;

        >span {
          font-size: 24px;
        }
      }
    }
  }

  .router-active-class {
    color: $primaryColor;
  }

  // 动画效果
  .slide-left-enter,
  .slide-right-leave-to {
    transform: translateX(100%);
  }

  .slide-left-leave-to,
  .slide-right-enter {
    transform: translateX(-100%);
  }

  .slide-left-enter-to,
  .slide-left-leave,
  .slide-right-enter-to,
  .slide-right-leave {
    transform: translateX(0);
  }

  .slide-left-enter-active,
  .slide-left-leave-active,
  .slide-right-enter-active,
  .slide-right-leave-active {
    transition: all 0.2s linear;
    position: fixed;
  }
</style>
